<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="uft-8">
  	<title>1-3 留言板练习</title>
  	<style type="text/css">
  		*{
  			margin: 0;
  			padding: 0;
  			margin-top: 5px;
  		}
  		ul{
  			width: 300px;
  			height: 300px;
  			border: 1px solid black;
  			margin-top: 10px;
			list-style: none;
  		}
  	</style>
</head>
<body>
	<input type="text" value="请输入您的内容">
	<input type="button" value="提交">
	<ul></ul>
	<script type="text/javascript">
		var anniu=document.querySelectorAll('input');
		var liuyan=document.querySelector('ul');

		anniu[0].onclick=function(){
			anniu[0].value='';
			anniu[0].focus();
		};
		anniu[1].onclick=function(){
			var val=anniu[0].value;
			var text='<li>'+ val +'</li>';
			liuyan.innerHTML+=text;
		};
  	</script>
</body>
</html>